<template>
    <div>
        <h1>Welcome to the homepage</h1>
        <AppAlert>
            This is an auto-imported component
        </AppAlert>
        <hello />
        <NuxtLink to="/about">About page</NuxtLink><br />
        <NuxtLink to="/posts/5">固定参数跳转</NuxtLink><br />
        <NuxtLink :to="{ path: '/about', query: { data: JSON.stringify(queryData) } }">动态参数跳转</NuxtLink><br />

        <div><a-button type="primary" @click="goto('/about')">goto About Page</a-button></div>
        <br />
        <ClientOnly>
            <span>属性counter: {{ store.counter }}</span>&nbsp;&nbsp;&nbsp;
            <span>计算属性doubleCounter: {{ store.doubleCounter }}</span>
            <div><a-button type="primary" @click="store.increment()">use pinia store方法</a-button></div>
            <br />
            <span>属性counter: {{ counter }}</span>&nbsp;&nbsp;&nbsp;
        </ClientOnly>
        <!-- <span>计算属性doubleCounter: {{ store.doubleCounter }}</span> -->
        <div><a-button type="primary" @click="addCounter()">useState状态管理</a-button></div>
    </div>
</template>
<script setup lang="ts">
let router = useRouter();
let queryData = { id: 1 }
// pinia store
import myStore from '~/stores/myStore';
const store = myStore();
// useState
const counter = useCounter()
// 定义1个方法
const addCounter = () => {
    counter.value++
}
// useCookie
/// 1个 cookie 对象
const userInfoCookie = useCookie("co_user", { "maxAge": 60 })
userInfoCookie.value = {
    name: "may",
    age: 5
}
/// 获取cookie 数据
const uCookie = useCookie("co_user")
console.log(uCookie.value)
// useFetch
const param1 = ref('value1')
const { data, pending, error, refresh } = await useFetch('https://api.nuxtjs.dev/moutains', {
    query: { param1, param2: 'value2' },
    server: false   // 客户端执行
})
// 使用封装的 useFetch 接口
const {data:userData} = await useInfoFetch({})
console.log('userData', userData)
// 页面跳转
const goto = (path: string) => {
    router.push(path)
};
</script>